.login-container {
	height: 100vh;
	width: 750rpx;
	padding: 0;
	margin: 0;
}

.login-header {
	padding-top: calc(var(--status-bar-height) + 180rpx);
	text-align: center;
}

.login-header-register {
	padding-top: calc(var(--status-bar-height) + 100rpx);
	text-align: center;
}

.login-img {
	width: 200rpx;
	height: 200rpx;
}

.login-mode {
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
}

.mode-btn {
	padding: 10rpx 30rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
	color: #666666;
	border-bottom: 2rpx solid transparent;
}

.mode-btn.active {
	color: #10aeff;
	border-bottom-color: #10aeff;
}

.login-form {
	background-color: #ffffff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin: 40rpx 80rpx 60rpx;
}

.input-group {
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #cccccc;
	padding: 20rpx 10rpx;
}

.input {
	flex: 1;
	padding: 10rpx;
	font-size: 32rpx;
}

.input-icon {
	margin-left: 10rpx;
	color: #666666;
}

.send-code-bt {
	background-color: #10aeff;
	color: #ffffff;
	padding: 10rpx 14rpx;
	font-size: 24rpx;
	border-radius: 10rpx;
}

.login-btn-container {
	margin: 60rpx 80rpx;
}

.login-btn {
	width: 100%;
	height: 80rpx;
	background-color: #10aeff;
	color: #ffffff;
	font-size: 34rpx;
	border-radius: 45rpx;
}

.login-options {
	display: flex;
	justify-content: center;
	gap: 80rpx;
}

.option {
	padding: 15rpx 0;
	font-size: 26rpx;
	color: #666666;
}